<template>
  <div id="app">
		<div class="bookTable">
			<h1>图书管理</h1>
			<div class="tableContent">
				<div class="title">
					<form id="search">
						<label for="serial">编号:</label>
						<input type="text" id='serial' disabled v-model="id">
						<label for="name">名称:</label>
						<input type="text" id='name' v-model="name">
						<button @click.prevent="addBook" :disabled="isAble">提交</button>
					</form>
					<div class="total">
						<span>图书总量： {{length}}</span>
					</div>
				</div>
				<table id="books" >
					<thead>
						<tr>
							<th width="10%">编号</th>
							<th width="15%">名称</th>
							<th width="50%">时间</th>
							<th width="25%">操作</th>
						</tr>
					</thead>
					<tbody>
						<tr v-for="item in bookList" :key="item.id">
							<td>{{item.id}}</td>
							<td>{{item.name}}</td>
							<td>{{item.date | dateFormat}}</td>
							<td>
								<el-button type="primary" icon="el-icon-edit"  size="small" @click="editBook(item.id,item.name)"></el-button>
								<el-button type="danger" icon="el-icon-delete" size="small" @click="deleteBook(item.id)"></el-button>
							</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
  </div>
</template>

<script>
export default {
  name: 'app',
	data() {
		return {
			bookList: [],
			length: 0,
			id: '',
			name: '',
			isAble: false,
			isEdit: false
		}
	},
	created() {
		this.getBooks()
	},
	methods: {
		// 获取图书列表
		getBooks:  async function() {
		const {data:res} = await	this.$http.get('/books')
		this.bookList = res
		this.length = res.length
		},
		// 添加/修改提交图书
		addBook: async function() {
			if(this.isEdit) {
					let {data: res} = await this.$http.put('books/edit'+ this.id, {
							name: this.name
					})
				if(res.status == 200) {
					this.getBooks()
					this.name = ''
				}
			}else {
					let {data: res} = await this.$http.post('/books', {
						id: this.id,
						name: this.name
					})
					if(res.status == 200) {
						this.getBooks()
						this.name = ''
					}
			}
		},
		// 点击修改
		editBook: function(id,name) {
			this.isEdit = true
			this.id = id
			this.name = name
		},
		// 点击删除
		deleteBook: async function(id) {
			let isConfirm = confirm('你确定进行删除操作吗')
			if(isConfirm) {
				let {data: res} = await this.$http.delete('books/delete'+ id)
				if(res.status == 200) {
					this.getBooks()
					this.$message.success('删除成功')
				}
			}
		}
	},
	watch: {
		name: async function(val) {
			if(this.name) {
				let {data:res} = await this.$http.get('books/book'+ this.name)
					if(res.status == 1) {
							this.$message('名称已存在')
							this.isAble = true
						}
					
					else if (res.status == 2) {
						this.isAble = false
					}
			}
		
		}
	}
}
</script>

<style lang="less" scoped>
	.bookTable {
		width: 600px;
		margin: 100px auto;
		h1 {
			text-align: center;
		}
		.title {
			background-color: #42B983;
			
			#search {
				padding: 10px 0;
				border-bottom: 1px dotted #f0f;
				label {
					margin: 0 20px 0 10px;
					font-weight: 700;
				}
				input {
					width: 150px;
					height: 20px;
					outline: none;
				}
				button {
					margin-left: 30px;
				}
			}
			.total {
				padding: 6px 0;
				text-align: center;
				font-weight: 700;
				border-bottom: 1px dotted #f0f;
			}
			
		}
		#books {
			width: 100%;
			text-align: center;
			border-left : 1px dotted #f0f;
			th,td {
				height: 30px;
				border-right: 1px dotted #f0f;
				border-bottom: 1px dotted #f0f;
			}
		}
	}
</style>
